<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes" />    
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="format-detection" content="telephone=yes"/>
		<meta name="msapplication-tap-highlight" content="no" />
		<title>TrueColor</title>

	    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap/bootstrap-theme.min.css" rel="stylesheet">
	    <link rel="stylesheet" href="css/responsive-nav/responsive-nav.css">
	    <link rel="stylesheet" href="css/unslider/unslider.css">
	    <link rel="stylesheet" href="css/unslider/unslider-dots.css">
	    <link rel="stylesheet" href="css/common/styles.css">
	    <link rel="stylesheet" href="css/product/styles.css">
		
	</head>
	<body>
		
		<div id="header" class="header">
			<img src="img/logo.png" height="90px" />
			<nav class="nav-collapse middle-navbar navbar navbar-default">
	      		<ul>
			        <li><a href="javascript:void(0)">首页</a></li>
			        <li><a href="javascript:void(0)">走进真彩</a></li>
			        <li><a href="javascript:void(0)">产品</a></li>
			        <li><a href="javascript:void(0)">销售市场</a></li>
			        <li><a href="javascript:void(0)">新闻</a></li>
			        <li><a href="javascript:void(0)">真彩生态圈</a></li>
			        <li><a href="javascript:void(0)">人才招聘</a></li>
			        <li><a href="javascript:void(0)">联系我们</a></li>
		      	</ul>
		    </nav>	
		</div>
		
		<nav class='navbar-fixed-top' style="display: none;">	
			<nav class="nav-collapse middle-navbar navbar navbar-default">
	      		<ul>
			        <li><a href="javascript:void(0)">首页</a></li>
			        <li><a href="javascript:void(0)">走进真彩</a></li>
			        <li><a href="javascript:void(0)">产品</a></li>
			        <li><a href="javascript:void(0)">销售市场</a></li>
			        <li><a href="javascript:void(0)">新闻</a></li>
			        <li><a href="javascript:void(0)">真彩生态圈</a></li>
			        <li><a href="javascript:void(0)">人才招聘</a></li>
			        <li><a href="javascript:void(0)">联系我们</a></li>
		      	</ul>
		    </nav>
		</nav>
		
		<div class="banner" style="clear: both;">
		    <ul>
		        <li style="background-image: url(img/product/product_slider_01.png); background-size: 100% 100%; width: 25%;">
					<div class="inner">
						<h1>点亮出彩人生</h1>
						<p class="slider-img1-p">Inspire the Creativity</p>

						<a class="btn" href="#download">详情</a>
					</div>
				</li>
		        
		    </ul>
		</div>
		
		<div class="panel panel-danger">
			
	      <div class="panel-heading">
	      	<div  style="float: left;"><input name="style" type="radio" value="" /></div>
	      	<div>
	      		<h3 class="panel-title">热销爆款</h3>
	      		<input name="style" type="radio" value="" />
	      	</div>	
	      </div>
	      
	      
      	<div class="panel-body">
        <div class="module-product-list">
		<ul>
			<li>
				<a href="javascript：void(0)" title=""> <img src="img/product/hot_product_01.png" title="V3348状元红滑丽芯中性笔 " alt="V3348状元红滑丽芯中性笔 ">
					<p>V3348状元红滑丽芯中性笔 </p>
					
				</a>
			</li>
			<li>
				<a href="javascript：void(0)" title=""> <img src="img/product/hot_product_02.png" title="3031A大白鲨中性笔680 规格：0.5mm/通用头" alt="3031A大白鲨中性笔680 规格：0.5mm/通用头">
					<p>3031A大白鲨中性笔680 </p>
				</a>
			</li>
			<li>
				<a href="/shop/zh_CN/c/PERFECTSENSE" title=""> <img src="img/product/hot_product_03.png" title="C511大老板中性670" alt="C511大老板中性670">
					<p>C511大老板中性670</p>
				</a>
			</li>
			<li>
				<a href="/shop/zh_CN/c/PERFECTSENSE" title=""> <img src="img/product/hot_product_04.png" title="GP-2740可擦中性笔660" alt="GP-2740可擦中性笔660">
					<p>GP-2740可擦中性笔660</p>
				</a>
			</li>
			<li>
				<a href="/shop/zh_CN/c/PERFECTSENSE" title=""> <img src="img/product/hot_product_05.png" title="0221B商务中性笔 " alt="0221B商务中性笔 ">
					<p>0221B商务中性笔  </p>
				</a>
			</li>
	
		</ul>
		</div>
	      </div>
	    </div>
		
		<!-- 全局js -->
		<script src="js/jquery/jquery-1.12.4.min.js"></script>
		<script src="js/bootstrap/bootstrap.min.js"></script>
		<script src="js/responsive-nav/responsive-nav.min.js"></script>
		<script src="js/headroom/headroom.min.js"></script>
		
		<script src="js/jquery/jquery.event.move.js"></script>
		<script src="js/jquery/jquery.event.swipe.js"></script>
		<script src="js/unslider/unslider.min.js"></script>
		
	    <script type="text/javascript">
	    	
	    	if(window.chrome) {
				$('.banner li').css('background-size', '100% 100%');
			}

			$('.banner').unslider({
				arrows: false,
				fluid: true,
				dots: true
			});
	    	
	    	var navigation = responsiveNav(".nav-collapse", {
		        animate: true,                    // Boolean: Use CSS3 transitions, true or false
		        transition: 284,                  // Integer: Speed of the transition, in milliseconds
		        label: "Menu",                    // String: Label for the navigation toggle
		        insert: "after",                  // String: Insert the toggle before or after the navigation
		        customToggle: "",                 // Selector: Specify the ID of a custom toggle
		        closeOnNavClick: false,           // Boolean: Close the navigation when one of the links are clicked
		        openPos: "relative",              // String: Position of the opened nav, relative or static
		        navClass: "nav-collapse",         // String: Default CSS class. If changed, you need to edit the CSS too!
		        navActiveClass: "js-nav-active",  // String: Class that is added to <html> element when nav is active
		        jsClass: "js",                    // String: 'JS enabled' class which is added to <html> element
		        init: function(){},               // Function: Init callback
		        open: function(){},               // Function: Open callback
		        close: function(){}               // Function: Close callback
		      });
	    
	    	//  Find any element starting with a # in the URL
			//  And listen to any click events it fires
			$('a[href^="#"]').click(function() {
				//  Find the target element
				var target = $($(this).attr('href'));

				//  And get its position
				var pos = target.offset(); // fallback to scrolling to top || {left: 0, top: 0};

				//  jQuery will return false if there's no element
				//  and your code will throw errors if it tries to do .offset().left;
				if(pos) {
					//  Scroll the page
					$('html, body').animate({
						scrollTop: pos.top,
						scrollLeft: pos.left
					}, 1000);
				}

				//  Don't let them visit the url, we'll scroll you there
				return false;
			});
	    
			$(function() {
 
 				var headroom = new Headroom(document.getElementById("header"), {
			        tolerance : 0,
			        offset : 90,
			        classes : {
			            initial : "slide",
			            pinned : "slide--reset",
			            unpinned : "slide--down"
			        },
			         // callback when pinned, `this` is headroom object
				    onPin : function() {},
				    // callback when unpinned, `this` is headroom object
				    onUnpin : function() {$('.navbar-fixed-top').css("display","block");},
				    // callback when above offset, `this` is headroom object
				    onTop : function() {$('.navbar-fixed-top').css("display","none");},
				    // callback when below offset, `this` is headroom object
				    onNotTop : function() {},
				    // callback at bottom of page, `this` is headroom object
				    onBottom : function() {},
				    // callback when moving away from bottom of page, `this` is headroom object
				    onNotBottom : function() {}
			    });
			    headroom.init();
			    
			});
    	</script>
	    
	</body>
</html>
